import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, ImageBackground, Image, TouchableOpacity } from "react-native";
import { Shadow } from 'react-native-shadow-2';
import IconNavBar from '@/components/IconNavBar'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import { CoinList } from '@/config/config'
import { getValue } from "@/utils/deviceStorage";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const CoinSelect = (props) => {

    const [coinList, setCoinList] = useState([])
    const [coinType, setCoinType] = useState('');

    useEffect(() => {
        let str = getValue('coinType')
        let arr = CoinList
        setCoinType(str)
        setCoinList(arr)
    }, [])

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handleChangeCoin = (coinType) => {
        // if (coinType) {
        //     setObjectValue('coinType', coinType)
        //     setCoinType(coinType)
        //     setCoinList([...coinList])
        // }
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} handlePressLeft={handlePressLeft}
                {...sectokenCommonCenterProps}
                {...{ title: 'Change Coin', backgroundColor: '#F5F6FA' }} />
            <View style={styles.bodyContent}>
                <View style={styles.divider}></View>
                <View style={styles.coinContent}>
                    {coinList && coinList.map((item, index) => {
                        const isSelected = item.coinType === coinType
                        return (
                            <TouchableOpacity key={index} onPress={() => handleChangeCoin(item.coinType)}
                                style={{
                                    ...styles.itemContent,
                                    marginTop: index == 0 ? 0 : 18 * ratio
                                }}>
                                {isSelected ? <Shadow offset={[0, 2]}
                                    distance={0} startColor='rgba(0,0,0,0.1600)' finalColor='transparent' radius={8}>
                                    <ImageBackground source={item.backImg} style={{
                                        width: 290 * ratio, height: 85 * ratio
                                    }}>
                                        <View style={styles.itemTop}>
                                            <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 13 * ratio, marginTop: 12 * ratio }}>
                                                <Shadow offset={[0, 2]}
                                                    distance={0} startColor='rgba(0,0,0,0.1600)' finalColor='transparent'>
                                                    <View style={{ ...styles.logoBackContent, backgroundColor: item.logoBackColor }}>
                                                        <Image source={item.logoImg} style={{ width: 20 * ratio, height: 20 * ratio }} />
                                                    </View>
                                                </Shadow>
                                                <View style={{ marginLeft: 10 * ratio }}>
                                                    <Text style={styles.title1}>{item.coinType}</Text>
                                                    <Text style={styles.title2}>{item.fullName}</Text>
                                                </View>
                                            </View>
                                            <ImageBackground style={{ width: 45 * ratio, height: 47 * ratio }}
                                                source={require('@/assets/imgs/checked.png')} />
                                        </View>
                                        <View style={styles.itemBottom}>
                                            <Text style={styles.title3}>{item.profile}</Text>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <Text style={{ ...styles.title1, marginRight: 16 * ratio }}>0.98</Text>
                                                <Image source={require('@/assets/imgs/show.png')}
                                                    style={{ width: 15 * ratio, height: 12 * ratio, marginRight: 8 * ratio }} />
                                            </View>
                                        </View>
                                    </ImageBackground>
                                </Shadow>
                                    :
                                    <ImageBackground source={item.backImg} style={{
                                        width: 290 * ratio, height: 85 * ratio, borderRadius: 8,
                                        backgroundColor: '#000000', opacity: 0.51,
                                    }}>
                                        <View style={styles.itemTop}>
                                            <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 13 * ratio, marginTop: 12 * ratio }}>
                                                <Shadow offset={[0, 2]}
                                                    distance={0} startColor='rgba(0,0,0,0.1600)' finalColor='transparent'>
                                                    <View style={{ ...styles.logoBackContent, backgroundColor: item.logoBackColor }}>
                                                        <Image source={item.logoImg} style={{ width: 20 * ratio, height: 20 * ratio }} />
                                                    </View>
                                                </Shadow>
                                                <View style={{ marginLeft: 10 * ratio }}>
                                                    <Text style={styles.title1}>{item.coinType}</Text>
                                                    <Text style={styles.title2}>{item.fullName}</Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={styles.itemBottom}>
                                            <Text style={styles.title3}>{item.profile}</Text>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <Text style={{ ...styles.title1, marginRight: 16 * ratio }}>0.98</Text>
                                                <Image source={require('@/assets/imgs/show.png')}
                                                    style={{ width: 15 * ratio, height: 12 * ratio, marginRight: 8 * ratio }} />
                                            </View>
                                        </View>
                                    </ImageBackground>
                                }

                            </TouchableOpacity>
                        )
                    })}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    bodyContent: {
        flex: 1,
        marginTop: 10 * ratio
    },
    divider: {
        width: width,
        height: 0,
        borderWidth: 1,
        borderColor: '#707070',
        opacity: 0.15,
        marginTop: 15 * ratio
    },
    coinContent: {
        flex: 1,
        marginTop: 19 * ratio,
        alignItems: 'center'
    },
    itemContent: {
        width: 290 * ratio,
        height: 85 * ratio,
        borderRadius: 8,
        flexDirection: 'row'
    },
    itemTop: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    logoBackContent: {
        width: 30 * ratio,
        height: 30 * ratio,
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    triAngleContent: {
        width: 0,
        height: 0,
        borderLeftWidth: 47,
        borderLeftColor: 'transparent',
        borderTopWidth: 45,
        borderTopColor: '#FF6F00'
    },
    itemBottom: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    title1: {
        fontSize: 14,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FFFFFF',
        lineHeight: 19
    },
    title2: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FFFFFF',
        lineHeight: 13
    },
    title3: {
        fontSize: 8,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FFFFFF',
        lineHeight: 10,
        marginLeft: 23 * ratio
    }
})
export default CoinSelect